<template>
  <!--首页-->
  <div>
    <el-container>
      <!--头部-->
      <el-header style="font-size: 12px">
        <el-row :gutter="80">
          <!--左侧-->
          <el-col :span="4">
            <!--        <div class="leftContent">
                      <span class="el-icon-monitor"></span>
                      <span style="color: #f9fafc">机场统一通信平台</span>
                    </div>-->
            <div>
              <img src="../assets/logo.png" alt="" class="logoImg">
              <span>机场统一通信平台</span>
            </div>
          </el-col>
          <!--中部-->
          <el-col :span="12">
            <!--组件菜单-->
            <!--        <div style="border-radius: 5px">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     background-color="#009DD9"
                     text-color="#fff"
                     router=true
            >
              <el-menu-item index="/news">处理中心</el-menu-item>
              <el-menu-item index="/dispatch">处理中心</el-menu-item>
              <el-menu-item index="/dispatch">消息中心</el-menu-item>
            </el-menu>
            </div>-->
            <!--路由自设定-->
            <div style="background-color: #009DD9;border-radius: 5px">
              <el-row :gutter="10" style="margin-left: 20%">
                <el-col :span="4">
                  <router-link :to="{name:'/news'}">
                    <div class="contentText">
                      <span>消息</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="4">
                  <router-link :to="{name:'/dispatch'}">
                    <div class="contentText">
                      <span>调度</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="4">
                  <router-link :to="{name:'/dispatch'}">
                    <div class="contentText">
                      <span>通讯录</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="4">
                  <router-link :to="{name:'/dispatch'}">
                    <div class="contentText">
                      <span>会议</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="4">
                  <router-link :to="{name:'/dispatch'}">
                    <div class="contentText">
                      <span>文件</span>
                    </div>
                  </router-link>
                </el-col>
                <el-col :span="4">
                  <router-link :to="{name:'/elTree'}">
                    <div class="contentText">
                      <span>elTree</span>
                    </div>
                  </router-link>
                </el-col>

              </el-row>
            </div>
          </el-col>
          <!--右侧-->
          <el-col :span="8">
            <el-row>
              <!--用户图标-->
              <el-col :span="6">
                <span class="el-icon-user rightpointer"></span>
                <sapn>张三</sapn>
              </el-col>
              <el-col :span="4">
                <span class="el-icon-user rightpointer"></span>
              </el-col>
              <el-col :span="4">
                <span class="el-icon-user rightpointer"></span>
              </el-col>
              <el-col :span="4">
                <span class="el-icon-user rightpointer"></span>
              </el-col>
              <el-col :span="4">
                <span class="el-icon-user rightpointer"></span>
              </el-col>
            </el-row>
            <div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!--中部切换-->
      <el-main>
        <router-view/>
      </el-main>
      <!--底部-->
      <!--            <el-footer>Footer</el-footer>-->
    </el-container>
  </div>
</template>

<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  import newsApi from '@/api/news'
  import TEST from '@/api/test'

  export default {
    name: 'Home',
    components: {
      HelloWorld
    },

    created () {
      // this.getData();
      this.getTest()
    },
    methods: {
      //获取数据，无条件则获取全部数据
      getData () {
        console.log('用户信息')
        newsApi.findByPage({})
          .then(res => {
            // 返回数据
            console.log(res)
          })
          .catch(err => {
            // 异常情况
          })

      },
      getTest () {
        TEST.querySubscriber({
          fleetId: 67,
          all: 1
        })
          .then(res => {
            // 返回数据
            console.log(res)
          })
          .catch(err => {
            // 异常情况
          })

      },
      handleReset () {
        this.$refs.form.resetFields()
        this.$emit('on-reset')
      },
      /*新增*/
      handleOpenCreate () {
        this.createData.noticeTitle = ''
        this.createData.content = ''
        this.createData.createBy = ''
        this.createData.noticeType = ''
        this.updateIndex = -1
        this.showCreate = true
      },

      //编辑
      handleEdit (mesId) {
        this.editMesId = mesId
        newsApi.getMessageInfoById({
          mesId
        })
          .then(res => {
            // 返回数据
            this.createData = res
          })
          .catch(err => {
            // 异常情况
          })
        this.updateIndex = 11
        this.showCreate = true
      },
      // 新增数据
      handleCreate () {
        this.$refs.create.validate((valid) => {
          if (valid) {
            if (this.updateIndex < 0) {
              // 新建
              newsApi.addMessage({
                noticeTitle: this.createData.noticeTitle,
                content: this.createData.content,
                createBy: this.createData.createBy,
                noticeType: this.createData.noticeType,
              })
                .then(res => {
                  // 返回数据
                  this.$Message.success('创建成功')
                  this.getData()
                })
                .catch(err => {
                  // 异常情况
                })

            } else {
              // 修改
              newsApi.updateMessage({
                mesId: this.editMesId,
                noticeTitle: this.createData.noticeTitle,
                content: this.createData.content,
                createBy: this.createData.createBy,
                noticeType: this.createData.noticeType,
              })
                .then(res => {
                  // 返回数据
                  this.$Message.success('修改成功')
                  this.getData()
                })
                .catch(err => {
                  // 异常情况
                })

            }

            this.showCreate = false
            this.creating = false
            this.$nextTick(() => {
              this.creating = true
            })
          } else {
            this.creating = false
            this.$nextTick(() => {
              this.creating = true
            })
          }
        })
      },

      // 详情
      showDetail (dxmbTywysbm) {
        const item = dxmbTywysbm
        this.$router.push({
          path: '/employee/comuser/comuser-detail',
          name: 'comuser-detail',
          params: {
            item
          }
        })
      },

      //删除
      handleDelete (mesId) {
        this.$Modal.confirm({
          title: '删除',
          content: '确定删除吗？',
          onOk: () => {
            newsApi.deleteById({
              mesId
            })
              .then(res => {
                // 返回数据
                this.$Message.success('删除成功')
                this.getData()
              })
              .catch(err => {
                // 异常情况
                this.$Message.error('删除失败')
              })
          }
        })
      }
    },
  }
</script>
<style scoped>
  a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .el-container {
    height: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .el-header {
    /*background-color: #282828;*/
    background-color: #B3C0D1;
    color: #fff;
    text-align: left;
    line-height: 60px;
    padding: 0;
    overflow: hidden;
  }

  .logoImg {
    height: 30px;
    width: 30px;
    /*line-height: 30px;*/
  }


  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    padding: 0;
    margin: 0;
  }

  body > .el-container {
    margin-bottom: 20px;

  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  /*头部*/
  .leftContent {
    margin: 0 !important;
    padding: 0;
    cursor: pointer;
  }

  .el-row {
    margin-bottom: 20px;
  }

  last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #009DD9;
  }

  .bg-bgc {
    margin-top: 2%;
    background: #009DD9;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /*头部结束*/

  /*中部开始*/
  .contentText {
    color: #fff;
    cursor: pointer;
  }

  /*中部结束*/

  /*右侧开始*/
  .rightpointer {
    cursor: pointer;
  }

  /*右侧头部结束*/


</style>
